<template>
  <div class="user-container">

    <div class="user-info-container">
      <img :src="userInfo.avatarurl" width="60" height="60">
      <div class="user-name-container">
        <div class="user-name">{{userInfo.nickname}}</div>
        <div class="user-credit">我的积分: {{userInfo.credit}}</div>
      </div>
    </div>

    <div class="user-detil-container">
      <router-link tag="div" to="/user/order"  class="order menu">
        <img src="./order.png" class="menu-img" height="26" width="26">
        <span>我的订单</span>
        <i class="menu-icon icon icon-jiantouyou"></i>
      </router-link >
      <router-link tag="div" to="/user/archive"  class="archive menu">
        <img src="./archive.png" class="menu-img" height="26" width="26">
        <span>我的档案</span>
        <i class="menu-icon icon icon-jiantouyou"></i>
      </router-link >
      <!-- <router-link tag="div" to="/user/report"  class="report menu"> -->
      <div class="menu archive">
        <a href="http://center.zkpacs.com.cn/jsp/wxNewServegroup/login/login.html?url=http://center.zkpacs.com.cn/jsp/wxNewServegroup/report/reportBind.html&rd=bak8malmrv&Tc=100009&wxid=o9E-9s003THTo9BeYKC5A4q_uBL4&ggid=gh_0fb17263cb92&from=groupmessage&isappinstalled=0">
          <img src="./report.png" class="menu-img" height="26" width="26">
          <span>报告查询</span>
          <i class="menu-icon icon icon-jiantouyou"></i>
        </a>
      </div>
      <!-- </router-link > -->
      <router-link tag="div" to="/user/proposal"  class="proposal menu">
        <img src="./proposal.png" class="menu-img" height="26" width="26">
        <span>意见反馈</span>
        <i class="menu-icon icon icon-jiantouyou"></i>
      </router-link >
    </div>

    <router-view></router-view>

  </div>
</template>

<script>
import { http } from 'api/main'

export default {
  data () {
    return {
      userInfo: {}
    }
  },
  created() {
    this._getUserInfo()
  },
  methods: {
    _getUserInfo() {
      http('userCenter').then((res) => {
        this.userInfo = res
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped scoped lang="stylus" rel="stylesheet/stylus">
  @import "user.styl"
</style>
